import {
  defineConfig,
  presetAttributify,
  presetUno,
  transformerAttributifyJsx,
  transformerVariantGroup,
} from "unocss";
import { naiveThemeOverrides } from "./setting";
const colors = naiveThemeOverrides.common;

export default defineConfig({
  content: {
    pipeline: {
      exclude: [
        "node_modules",
        ".git",
        ".github",
        ".husky",
        ".vscode",
        "dist",
        "mock",
        "public",
      ],
    },
  },
  // ...UnoCSS选项
  // presetUno: https://github.com/unocss/unocss/blob/main/packages/preset-mini/src/_rules/align.ts
  // presetWind: https://github.com/unocss/unocss/blob/main/packages/preset-wind/src/rules/background.ts
  // animate: https://github.com/unocss/unocss/blob/main/packages/preset-wind/src/theme.ts
  presets: [
    presetUno(),
    presetAttributify({ prefix: "uno-", prefixedOnly: false }),
  ],
  transformers: [
    transformerAttributifyJsx(), // jsx支持
    transformerVariantGroup(), // 变体组支持，"hover:bg-red hover:text-20" ==> "hover:(bg-red text-20)"
  ],
  shortcuts: {
    "wh-full": "w-full h-full",
    "align-center": "items-center",
    "f-c-c": "flex justify-center items-center",
    "f-b-c": "flex justify-between items-center",
    "f-a-c": "flex justify-around items-center",
    "f-e-c": "flex justify-evenly items-center",
    "flex-center": "f-c-c",
    "flex-x-center": "flex justify-center",
    "flex-y-center": "flex items-center",
    "f-x-c": "flex justify-center",
    "f-y-c": "flex items-center",
    "text-bold": "font-bold",
    "absolute-center": "absolute top-50% left-50% translate--50%",
  },
  rules: [],
  theme: {
    screens: {
      sm: "640px",
      // => @media (min-width: 640px) { ... }

      md: "768px",
      // => @media (min-width: 768px) { ... }

      lg: "1024px",
      // => @media (min-width: 1024px) { ... }

      xl: "1280px",
      // => @media (min-width: 1280px) { ... }

      "2xl": "1536px",
      // => @media (min-width: 1536px) { ... }
    },
    colors: {
      primary: colors.primaryColor,
      primary_hover: colors.primaryColorHover,
      primary_pressed: colors.primaryColorPressed,
      primary_active: colors.primaryColorActive,
      info: colors.infoColor,
      info_hover: colors.infoColorHover,
      info_pressed: colors.infoColorPressed,
      info_active: colors.infoColorActive,
      success: colors.successColor,
      success_hover: colors.successColorHover,
      success_pressed: colors.successColorPressed,
      success_active: colors.successColorActive,
      warning: colors.warningColor,
      warning_hover: colors.warningColorHover,
      warning_pressed: colors.warningColorPressed,
      warning_active: colors.warningColorActive,
      error: colors.errorColor,
      error_hover: colors.errorColorHover,
      error_pressed: colors.errorColorPressed,
      error_active: colors.errorColorActive,
      dark: "#18181c",
    },
  },
});
